<template>
  <d-layout class="layout">
    <d-aside class="layout-aside">
      <app-menu/>
    </d-aside>
    <d-aside class="layout-child-aside">
      <children-menu/>
    </d-aside>
    <d-layout>
      <d-header class="layout-header">
        <Header/>
      </d-header>

      <d-content class="main-content">
        <router-view/>
      </d-content>
      <d-footer>Footer</d-footer>
    </d-layout>
  </d-layout>
</template>

<script lang="ts" setup>

import {useApp} from "@/hooks";
import AppMenu from './menu/index.vue';
import ChildrenMenu from "@/layouts/menu/components/children-menu.vue";
import Header from './header/index.vue'

const {appInited, appInfo, appLayout, requestCounter, menuStyle, appChildrenMenu} = useApp();

</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;

  &-aside {
    width: 64px;
    background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  &-child-aside {

  }

  &-header{
    height: 50px;
    margin: 0px 10px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
    flex: none;
  }

}

</style>
